<template>
  <div class="root">
    <el-select v-model="value" placeholder="请选择" class="select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <MyEcharts :showStatus="value" :orderData="orderData" v-if="value == 0 && status" :key="0" />
    <MyEcharts :showStatus="value" :orderData="orderData" v-if="value == 1 && status" :key="1" />
  </div>
</template>
<script>
import MyEcharts from "@/components/MyEcharts";
export default {
  components: {
    MyEcharts,
  },
  props : {
    orderData : {
      type : Object
    }
  },
  data() {
    return {
      options: [
        {
          value: 0,
          label: "季度统计",
        },
        {
          value: 1,
          label: "年度统计",
        }
      ],
      value: 0,
      status : true,
    };
  }
};
</script>
<style lang="scss" scoped>
.root {
    position: relative;
    margin-top: 3%;
    .select {
        position: absolute;
        top: 2%;
        left: 10%;
        z-index: 10;
    }
}
#bar-echarts {
  height: 600px;
  // border: 1px solid red;
}
</style>